<template>
  <TypebaseSlot>
    <template v-slot:zhactbar>
      <div class="action-bar">
        <div class="btn-list">
          <div
            v-if="taskProgress === '待处理' || taskProgress === '已逾期'"
            class="btn-item"
          >
            <img
              v-if="blightRecordIdList.length === 1"
              src="~@/assets/action-bar-icon/handle-active.png"
              @click="handle"
            />
            <img
              v-else
              class="not-allowed"
              src="~@/assets/action-bar-icon/handle.png"
            />
          </div>
          <div
            v-if="taskProgress === '待处理' || taskProgress === '已逾期'"
            class="btn-item"
          >
            <img
              v-if="blightRecordIdList.length === 1"
              src="~@/assets/action-bar-icon/cancellation-active.png"
              @click="cancellation"
            />
            <img
              v-else
              class="not-allowed"
              src="~@/assets/action-bar-icon/cancellation.png"
            />
          </div>
        </div>
      </div>
    </template>

    <template v-slot:searchbox>
      <Typebtns @topitemtype="topitemtype" />
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select
            v-model="bionIdName"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in bionIdList"
              :key="index + 'bionId'"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <div class="input">
            <el-input v-model="eagTag" placeholder="请输入耳标" clearable />
          </div>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">处理时间段:</div>
        <div class="input">
          <el-date-picker
            v-model="startTime"
            align="right"
            clearable
            placeholder="请选择处理开始时间"
          />
          <el-date-picker
            v-model="endTime"
            align="right"
            clearable
            placeholder="请选择处理结束时间"
          />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="queryPageList" />
      </div>
    </template>

    <template v-slot:content>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        stripe
        max-height="88%"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="eagTag" label="耳标" />
        <el-table-column prop="name" label="个体名称" width="150" />
        <el-table-column prop="facilityName" label="个体所在设施" width="200" />
        <el-table-column :label="taskProgress==='已完成'?'处理完成时间':'处理时间'">
          <template slot-scope="scope">{{ format(scope.row) }}</template>
        </el-table-column>
        <el-table-column label="处理方式" prop="processMode" />
        <el-table-column label="处理结果" prop="result" />
        <el-table-column label="性别" prop="gender" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.gender === "MALE" ? "公" : "母" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="birthday" width="100" />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="length"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
      <el-dialog title="疫病任务处理" :visible.sync="addDialog">
        <el-form :model="formData">
          <el-row>
            <el-col :span="12">
              <el-form-item label="个体名称:">
                <el-input v-model="formData.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理方式:">
                <el-input v-model="formData.processMode" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理结果:">
                <el-input v-model="formData.result" placeholder />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理日期:">
                <!-- <el-date-picker v-model="formData.processTime" placeholder /> -->
                <el-date-picker
                  v-model="formData.processTime"
                  type="datetime"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="model-cancel-btn" @click="addDialog = false">取 消</el-button>
          <el-button
            type="primary"
            class="model-submit-btn"
            @click="confirm"
          >确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </TypebaseSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import TypebaseSlot from "@/components/BaseMainSlot/typebase.vue";
import { mymixin } from "@/utils/mixin";
import Typebtns from "@/components/Typebtns";
import req from "@/api/digital-production/health-management/individual-blight-record/index";
import { getToken } from "@/utils/auth";
export default {
  name: "OverDue",
  components: {
    Pagination,
    TypebaseSlot,
    Typebtns
  },
  mixins: [mymixin],
  data() {
    return {
      eagTag: "",
      // 搜索条件
      bionIdName: "",
      bionIdNumber: "",
      startTime: "",
      endTime: "",
      tableData: [],
      addDialog: false,
      formData: {},
      buttonselectlist: [
        { itemTypeId: 0, itemTypeName: "待处理" },
        { itemTypeId: 1, itemTypeName: "已逾期" },
        { itemTypeId: 2, itemTypeName: "已完成" },
        { itemTypeId: 3, itemTypeName: "已作废" }
      ],
      taskProgress: "",
      blightRecordIdList: [],
      bionIdList: [],
      loading: false,
      length: 0
    };
  },
  computed: {},
  watch: {},
  async created() {
    await this.queryPageList();
    await this.querybionId();
    await this.topitemtype(0);
  },
  mounted() {
    // this.tableData
  },
  methods: {
    //
    format(val) {
      let result = "";
      if (
        this.taskProgress === "待处理" ||
        this.taskProgress === "已逾期" ||
        this.taskProgress === "已作废"
      ) {
        result = val
          ? this.$moment(val.executionStartTime).format("YYYY-MM-DD") +
            "~" +
            this.$moment(val.executionEndTime).format("YYYY-MM-DD")
          : "";
      } else {
        result = val.processTime
          ? this.$moment(val.processTime).format("YYYY-MM-DD HH:mm:ss")
          : "";
      }
      return result;
    },
    topitemtype(e) {
      let index = this.buttonselectlist.findIndex(
        item => item.itemTypeId === e
      );
      if (index !== -1) {
        this.taskProgress = this.buttonselectlist[index]["itemTypeName"];
      }
      // 获取表格数据
      this.queryPageList();
    },

    // 查询表格
    async queryPageList() {
      this.loading = true;
      await req
        .queryPageList({
          page: this.currentPage,
          size: this.pageSize,
          entity: {
            startTime: this.startTime,
            endTime: this.endTime,
            name: this.bionIdName || this.bionIdNumber,
            taskProgress: this.taskProgress,
            eagTag: this.eagTag
          }
        })
        .then(res => {
          this.loading = false;
          if (res.code === 1) {
            let data = res.data || {};
            this.length = data.totalElements;
            let result = data.content || [];
            this.tableData = result;
            if (this.tableData.lenght === 0) {
              this.addblankmet();
            }
          }
        });
    },
    // 查询个体的信息
    async querybionId() {
      await req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then(res => {
          if (res.code === 1) {
            let data = res.data || [];
            this.bionIdList = data;
          }
        });
    },
    handleSelectionChange(list) {
      this.blightRecordIdList = [];
      let notvalue = true;
      this.blightRecordIdList = list.map(item => {
        if (item.blightRecordId) {
          return item.blightRecordId;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.blightRecordIdList.length > 0) this.delActive = true;
      else this.delActive = false;
      // 多个处理为单个数据
      if (this.blightRecordIdList.length > 1) {
        this.$message.warning("疫病记录不可一次处理多个！");
        this.blightRecordIdList.splice(0, this.blightRecordIdList.length - 1);
        this.delActive = false;
      }
      if (this.blightRecordIdList.length === 1) {
        let index = this.tableData.findIndex(
          item => item.blightRecordId === this.blightRecordIdList[0]
        );
        if (index !== -1) {
          this.formData = this.tableData[index];
        }
      }
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.queryPageList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    // handleEdit(row) {
    //   if (row.blightRecordId) {
    //     this.formData = row;
    //   }
    // },
    // 处理
    handle() {
      this.addDialog = true;
    },
    confirm() {
      this.formData.organizationNo = parseInt(getToken("organizationNo"));
      if (this.taskProgress === "已逾期") {
        this.formData.taskProgress = "已逾期";
      } else {
        this.formData.taskProgress = "已完成";
      }

      req.edit(this.formData).then(res => {
        if (res.code === 1) {
          this.$message.success("处理成功！");
          this.addDialog = false;
          this.formData = {};
          this.queryPageList();
        } else {
          this.$message.error("处理失败！");
        }
      });
    },
    // 作废
    cancellation() {
      this.$confirm("确认作废该项记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.formData.organizationNo = parseInt(getToken("organizationNo"));
          this.formData.taskProgress = "已作废";
          req.edit(this.formData).then(res => {
            if (res.code === 1) {
              this.$message.success("作废成功！");
              this.addDialog = false;
              this.formData = {};
              this.queryPageList();
            } else {
              this.$message.error("作废失败！");
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-table {
  overflow: auto;
}
.action-bar {
  width: 100%;
  height: $actionBarHeight;
  background-color: $hamburgerBgColor;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  .btn-list {
    display: flex;
    align-items: center;
    .btn-item {
      margin-right: 15px;
      img {
        height: 30px;
        cursor: pointer;
      }
      .not-allowed {
        cursor: not-allowed;
      }
    }
  }
}
::v-deep .el-dialog__body {
  background: #f0f3f7;
  .el-input {
    width: 200px;
  }
}

::v-deep .el-button {
  margin: 0;
}
::v-deep .el-row {
  margin: 5px;
  .el-col {
    min-height: 1px;
  }
}
::v-deep .Pagination {
  margin-top: 30px;
}
// 弹框底下按钮样式
.model-submit-btn {
  background-color: #006e91;
  border-color: #006e91;
  &:hover {
    background-color: #006f91b9;
    border-color: #006f91b9;
  }
}
.model-cancel-btn {
  &:hover {
    background-color: #006f9128;
    border-color: #006e91;
    color: #006e91;
  }
}
</style>
